.base {
  background-color: var(--theme-colors-monochrome-17);
  color: var(--theme-colors-monochrome-6);
  height: 100%;
  min-height: 500px;
  position: relative;
  width: 100%;

  .controller {
    align-items: center;
    display: flex;
    height: var(--theme-sizes-layout-giant);
    justify-content: space-between;
    margin-bottom: var(--theme-sizes-layout-medium);
  }
  .container {
    // border: solid var(--theme-sizes-border-width) var(--theme-colors-monochrome-13);
    font-family: 'Source Code Pro', monospace;
    font-size: var(--theme-sizes-font-small);
    height: 100%;
    overflow: auto;
    padding: var(--theme-sizes-layout-medium);
    position: relative;
  }
  .scrollSpacer {
    position: relative;
  }
  .measure {
    display: inline;
    position: absolute;
    white-space: pre-wrap;
    word-break: break-all;
  }
  .datetimeTooltip {
    white-space: nowrap;
  }
  .line {
    display: flex;
    position: absolute;
    width: 100%;
  }
  .line > * { white-space: nowrap; }
  .line > .number {
    color: var(--theme-colors-monochrome-10);
    flex-shrink: 0;
    text-align: right;
    user-select: none;
  }
  .line > .number::after { content: attr(data-label) '\00a0'; }
  .line > .level {
    color: var(--theme-colors-monochrome-10);
    flex-shrink: 0;
    padding: 1px;
  }
  .line > .level > .levelLabel { font-size: 0; }
  .line > .critical { color: var(--theme-colors-states-failed); }
  .line > .debug { color: var(--theme-colors-states-active); }
  .line > .error { color: var(--theme-colors-states-failed); }
  .line > .trace { color: var(--theme-colors-states-active); }
  .line > .warning { color: var(--theme-colors-states-suspended); }
  .line > .time {
    color: var(--theme-colors-base-0);
    flex-shrink: 0;
  }
  .line > .time::after { content: '\00a0'; }
  .line > .message {
    flex-grow: 1;
    line-break: anywhere;
    white-space: pre-wrap;
    word-break: break-all;
  }
  .scrollTo {
    bottom: var(--theme-sizes-layout-giant);
    display: flex;
    flex-direction: column;
    position: absolute;
    right: var(--theme-sizes-layout-giant);
  }
  .scrollTo > *:not(:first-child) {
    margin-top: var(--theme-sizes-layout-big);
  }
  .scrollTo > button {
    border-color: var(--theme-colors-monochrome-9);
    box-shadow: var(--theme-shadow);
    color: var(--theme-colors-monochrome-9);
    transition: opacity 0.2s linear;
    user-select: none;
  }
  .scrollToTop {
    opacity: 0.2;
  }
  .scrollToTop:focus {
    border-color: var(--theme-colors-action-normal);
    color: var(--theme-colors-monochrome-9);

    &::after {
      border-radius: var(--theme-sizes-border-radius);
      box-shadow: var(--theme-outline);
      content: '';
      height: 100%;
      position: absolute;
      width: 100%;
    }
  }
  .scrollToTop.show {
    opacity: 1;
    user-select: auto;
  }
  .enableTailing {
    transition: all 0.2s linear;
  }
  .enableTailing:focus {
    border-color: var(--theme-colors-action-normal);

    &::after {
      border-radius: var(--theme-sizes-border-radius);
      box-shadow: var(--theme-outline);
      content: '';
      height: 100%;
      position: absolute;
      width: 100%;
    }
  }
  .enableTailing.enabled {
    border-color: var(--theme-colors-action-normal);
    color: var(--theme-colors-action-normal);
  }
  .debugger {
    display: flex;
    padding: 0 var(--theme-sizes-layout-medium);

    & > span {
      color: var(--theme-colors-monochrome-6);
      font-size: var(--theme-sizes-font-small);
      margin-right: var(--theme-sizes-layout-medium);
    }
    & > span::before {
      color: var(--theme-colors-monochrome-8);
      content: attr(data-label);
      margin-right: var(--theme-sizes-layout-small);
    }
  }
}
.noWrap {
  .right { overflow: auto; }
  .line > .message { word-break: normal; }
}
